<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/1
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/bootstrap/css/bootstrap.min.css">

</head>
<style>
    .updateInfo li{
        float: left;
        list-style: none;
        width: 100px;

    }
    input{
        width: 140px;
    }
    .text-ellipsis{
        text-overflow:ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .updateInfo{
       display: none;

    }
    .closebutton{

       float: right;
        margin-right: 150px;
    }
.navigateBar{
    list-style: none;
}
    .navigateBar li{
        float: left;
        width: 50px;
    }
</style>
<body>


<div class="container-fluid">
<%--    <h2>创建模态框（Modal）</h2>--%>
<%--    <!-- 按钮触发模态框 -->--%>
<%--&lt;%&ndash;    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>&ndash;%&gt;--%>
<%--    <!-- 模态框（Modal） -->--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">修改</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-3 align-self-center">物品名称：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="wp form-control"></div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-3 align-self-center">单价：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="dj form-control"></div>
                    </div>

                    <br>
                    <div class="row">
                        <div class="col-3 align-self-center">数量：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="sl form-control"></div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-3 align-self-center">折扣：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="zk form-control"></div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-3 align-self-center">重量：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="zl form-control"></div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-3 align-self-center">分类：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="fl form-control"></div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-3 align-self-center">联系电话：</div>
                        <div class="col-9"> <input type="text" style="width: 150px" class="lx form-control"></div>
                    </div>
                   <br>
                    <div class="row">
                        <div class="col-3 align-self-center">商品图片：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="sp form-control"></div>
                    </div>

                    <br>
                    <div class="row">
                        <div class="col-3 align-self-center">商品描述：</div>
                        <div class="col-9"><input type="text" style="width: 150px" class="ms form-control"></div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary updateGoods">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
<br>
<h2 class="text-center">商品查询</h2>
<form class="userForm text-center">
    <input type="text" placeholder="物品名称" name="gname" id="gname">
    <input type="text" placeholder="单价" name="gprice" id="gprice">
    <input type="text" placeholder="数量" name="gnum" id="gnum">
    <input type="text" placeholder="折扣" name="discount" id="discount">
    <input type="text" placeholder="重量" name="weight" id="weight">
    <input type="text" placeholder="分类" name="gclassify" id="gclassify">
    <input type="text" placeholder="联系电话" name="gphone" id="gphone">
    <input type="text" placeholder="分类" name="gimg" id="gimg">
    <input type="text" placeholder="联系电话" name="miaoshu" id="miaoshu">
</form>
<table class="msgBox table-hover text-center col-md-8 offset-2 table table-bordered" border="1" width="80%">
    <thead>
    <tr>
        <th>物品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>折扣</th>
        <th>重量</th>
        <th>分类</th>
        <th>联系方式</th>
        <th>商品图片</th>
        <th>描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
    <br>

<div class="navigateBar pagination col-md-8 offset-5">

</div>

<br>
<div class="text-center">每页显示<select name="pageSize" id="pageSize">
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="10">10</option>
</select>条
</div>
<%--<div class="updateInfo" border="1" >--%>
<%--    <h2 class="text-center">修改</h2>--%>
<%--    <button class="closebutton" onclick="closeinfo()">关闭</button>--%>
<%--    <li>物品名称</li>--%>
<%--    <li>单价</li>--%>
<%--    <li>数量</li>--%>
<%--    <li>折扣</li>--%>
<%--    <li>重量</li>--%>
<%--    <li>分类</li>--%>
<%--    <li>联系方式</li>--%>
<%--    <li>商品图片</li>--%>
<%--    <li>描述</li>--%>
<%--    <li>操作</li>--%>
<%--    <br>--%>
<%--    <li><input type="text" style="width: 70px" class="wp"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="dj"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="sl"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="zk"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="zl"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="fl"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="lx"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="sp"></li>--%>
<%--    <li><input type="text" style="width: 70px" class="ms"></li>--%>
<%--    <li><button class="updateGoods">修改</button></li>--%>
<%--</div>--%>




<hr>
<h2 class="text-center">商品添加</h2>
<form action="${pageContext.request.contextPath}/insertSp" method="post" enctype="multipart/form-data" class="text-center">
    <input type="text" placeholder="物品名称" name="gname" id="name">
    <input type="number" placeholder="单价" name="gprice" id="price">
    <input type="number" placeholder="数量" name="gnum" id="num">
    <input type="number" placeholder="折扣" name="discount" id="count">
    <input type="number" placeholder="重量" name="weight" id="zhong">
    <input type="text" placeholder="分类" name="gclassify" id="classify">
    <input type="text" placeholder="联系电话" name="gphone" id="phone">
    <input type="file" name="goodsimg" id="simg">
    <input type="text" placeholder="描述" name="miaoshu" id="mian">
    <input type="submit" value="添加" id="a" />
</form>


</div>
</body>
<script src="${pageContext.request.contextPath}/vendor/jquery/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/vendor/bootstrap/js/bootstrap.min.js"></script>

<script>
    $(function(){
        getGoods();
        x();
        $(".userForm").change(function () {
            getGoods();
        })
        $("#pageSize").change(function () {
            getGoods();
        })
        $("#pageNums").change(function () {
            pageChoose();
        })
        $("#spgl").click(function () {
            getGoods();
        })
        $("#simg,#name,#num,#price,#count,#zhong,#classify,#phone,#mian").change(function () {
            $("#a").attr("disabled", false);
        })
    })
function tc(gid) {

    $('#myModal').modal('show');
    var url="${pageContext.request.contextPath}/selectGoods/"+gid;
    $.ajax({
        url:url,
        method:"POST",
        data:{"gid":gid},
        success:function(data) {
            console.log(data);
                $(".wp").val(data.gname);
                $(".dj").val(data.gprice);
                $(".sl").val(data.gnum);
                $(".zk").val(data.discount);
                $(".zl").val(data.weight);
                $(".fl").val(data.gclassify);
                $(".lx").val(data.gphone);
            $(".sp").val(data.gimg);
            $(".ms").val(data.miaoshu);
            $(".updateGoods").attr("onclick",'updateGoods('+data.gid+')');
            }
        })
}
    function x() {
        $("#a").click(function(){
            if ($("#simg").val() == "") {
                $("#a").attr("disabled", "disabled");
                alert("图片不能为空");
            } else if($("#name").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("商品名称不能为空");
            } else if($("#num").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("数量不能为空");
            } else if($("#price").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("单价不能为空");
            } else if($("#phone").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("电话不能为空");
            } else if($("#zhong").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("重量不能为空");
            } else if($("#classify").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("分类不能为空");
            }else if($("#count").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("折扣不能为空");
            }else if($("#mian").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("描述不能为空");
            }
        })
    }
function updateGoods(gid) {
    var gname=$(".wp").val();
    var gprice=$(".dj").val();
    var gnum=$(".sl").val();
    var discount=$(".zk").val();
    var weight=$(".zl").val();
    var gclassify=$(".fl").val();
    var gphone=$(".lx").val();
    var gimg=$(".sp").val();
    var miaoshu=$(".miaoshu").val();
    var data={"gid":gid,"gname":gname,"gprice":gprice,"gnum":gnum,"discount":discount,"weight":weight,"gclassify":gclassify,"gphone":gphone,"gimg":gimg,"miaoshu":miaoshu}
    var url="${pageContext.request.contextPath}/updateGoods";
    $.ajax({
        url:url,
        method:"POST",
        data:data,
        success:function(data) {
            console.log(data);
           if(data==1){
               alert("修改成功");
               $('#myModal').modal('hide');
               getGoods();
           }
        }
    })
}
function closeinfo() {
    $(".updateInfo").hide();

}
    function getGoods(pageNum){
        $("tbody").empty();
        var url="${pageContext.request.contextPath}/getGoods";
        var gname=$("#gname").val();
        var gprice=$("#gprice").val();
        var gnum=$("#gnum").val();
        var discount=$("#discount").val();
        var weight=$("#weight").val();
        var gclassify=$("#gclassify").val();
        var gphone=$("#gphone").val();
        var gimg=$("#gimg").val();
        var miaoshu=$("#miaoshu").val();
        var pageSize=$("#pageSize").val();

        var data={"gname":gname,"gprice":gprice,"gnum":gnum,"discount":discount,"weight":weight,"gclassify":gclassify,"gphone":gphone,"gimg":gimg,"miaoshu":miaoshu,"pageSize":pageSize,"pageNum":pageNum}

        $.ajax({
            url:url,
            method:"POST",
            data:data,
            success:function(data){
                console.log(data);
                var goods=data.list;
                for(var i=0;i<goods.length;i++){
                    var $tr=$("<tr>");
                    $(".msgBox tbody").append($tr);
                    var $gname=$("<td>");
                    var $gprice=$("<td>");
                    var $gnum=$("<td>");
                    var $discount=$("<td>");
                    var $weight=$("<td>");
                    var $gclassify=$("<td>");
                    var $gphone=$("<td>");
                    var $gimg=$("<td>");
                    var $img=$("<img src='"+goods[i].gimg+"' width='30px' height='30px'>");
                    $gimg.append($img);
                    var $miaoshu=$("<td>");
                    var $option=$("<td>");
                    var $btn=$("<button class='btn btn-danger'>删除</button>");
                    var $btn2=$("<button class='btn btn-success'>修改</button>")
                    $btn.attr("onclick",'deleteUser('+goods[i].gid+')');
                    $btn2.attr("onclick",'tc('+goods[i].gid+')');
                    $option.append($btn);
                    $option.append($btn2);
                    $gname.html(goods[i].gname);
                    $gprice.html(goods[i].gprice);
                    $gnum.html(goods[i].gnum);
                    $discount.html(goods[i].discount);
                    $weight.html(goods[i].weight);
                    $gclassify.html(goods[i].gclassify);
                    $gphone.html(goods[i].gphone);

                    $miaoshu.html(goods[i].miaoshu)
                    $tr.append($gname).append($gprice).append($gnum).append($discount).append($weight).append($gclassify).append($gphone).append($gimg).append($miaoshu).append($option);
                }


                makePageBar(data);
            }
        })
    }

    function deleteUser(gid) {
        var url="${pageContext.request.contextPath}/Goods/"+gid;
        $.ajax({
            url:url,
            method: "DELETE",
            success:function (data) {
                if(data==1){
                    alert("删除成功");
                    getGoods();
                }
            }
        })
    }


    function makePageBar(data){

        $(".navigateBar").empty();
        var isFirstPage=data.isFirstPage;
        var isLastPage=data.isLastPage;
        var hasPreviousPage=data.hasPreviousPage;
        var hasNextPage=data.hasNextPage;
        var currentPageNum=parseInt(data.pageNum);
        var navigatepageNums=data.navigatepageNums;
        if(isFirstPage!=true){
            $button=$("<button class='btn badge-primary' type='submit'/>")
            // $li=$("<li></li>");
            // $a=$("<a href='#'></a>");
            // $li.append($a);
            $button.attr("onclick","getGoods("+1+")").text("首页");
            $(".navigateBar").append($button);
        }

        if(hasPreviousPage==true){
            var previousPageNum=currentPageNum-1;
            $button=$("<button class='btn badge-primary' type='submit'/>")
            // $li=$("<li></li>");
            // $a=$("<a href='#'></a>");
            // $li.append($a);
            $button.attr("onclick","getGoods("+previousPageNum+")").text("上一页");

            $(".navigateBar").append($button);
        }

        for(var i=0;i<navigatepageNums.length;i++){
            var pageNum=navigatepageNums[i];
            $button=$("<button class='btn badge-primary' type='submit'/>")
            // $li=$("<li></li>");
            // $a=$("<a href='#'></a>");
            // $li.append($a);
            $button.attr("onclick","getGoods("+pageNum+")").text(pageNum);
            $(".navigateBar").append($button);
        }

        if(hasNextPage==true){
            $button=$("<button class='btn badge-primary' type='submit'/>")
            var hasNextPageNum=currentPageNum+1;
            // $li=$("<li></li>");
            // $a=$("<a href='#'></a>");
            // $li.append($a);
            $button.attr("onclick","getGoods("+hasNextPageNum+")").text("下一页");

            $(".navigateBar").append($button);
        }
        if(isLastPage!=true){
            var lastPageNum=data.pages;
            $button=$("<button class='btn badge-primary' type='submit'/>")
            // $li=$("<li></li>");
            // $a=$("<a href='#'></a>");
            // $li.append($a);
            $button.attr("onclick","getGoods("+lastPageNum+")").text("尾页");
            $(".navigateBar").append($button);
        }
    }
</script>
</html>
